<template>
	<view class="container">
		<view class="main-content-frequency">
			<!-- Option Buttons -->
			<view class="options">
				<view class="options-left">
					<text class="distance">{{ verticalDistance }}px</text>
					<text>上下位置</text>
				</view>

				<view class="slider-container" @touchstart="handleTouchStart" @touchmove="drag" @touchend="stopDrag">
					<!-- angle-bg.png as background -->
					<image src="/static/angle-bg.png" class="bg-image"></image>

					<!-- Up, down, left, right arrows -->
					<image src="/static/angle-up.png" class="points-image up-arrow arrow-up"></image>
					<image src="/static/angle-down.png" class="points-image down-arrow arrow-down"></image>
					<image src="/static/angle-left.png" class="points-image left-arrow arrow-left"></image>
					<image src="/static/angle-right.png" class="points-image right-arrow arrow-right"></image>

					<!-- Ball (draggable and displays position distance) -->
					<image src="/static/angle-ball.png" class="points-image ball" :style="ballStyle"
						@touchstart="handleTouchStart" @touchmove="drag" @touchend="stopDrag">
					</image>
				</view>

				<view class="right-column">
					<view class="options-text">
						<text class="distance">{{ horizontalDistance }}px</text>
						<text>左右位置</text>
					</view>
				</view>
			</view>
		</view>

		<!-- Start Button at the bottom right -->
		<view class="start-column-frequency">
			<button class="start-button" @click="startGame">开始/结束</button>
			<image src="/static/start.png" alt="Start Icon" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dragging: false, // 是否正在拖动
				startX: 0, // 开始触摸的 X 位置
				startY: 0, // 开始触摸的 Y 位置
				currentX: 50, // 小球当前的 X 位置
				currentY: 50, // 小球当前的 Y 位置
				containerTop: 0, // 容器的顶部位置
				containerLeft: 0, // 容器的左侧位置
				containerWidth: 0, // 容器宽度
				containerHeight: 0, // 容器高度
				verticalDistance: 0, // 垂直距离
				horizontalDistance: 0, // 水平距离
			};
		},
		computed: {
			// 小球样式
			ballStyle() {
				return {
					left: `${this.currentX}px`,
					top: `${this.currentY}px`,
				};
			},
		},
		methods: {
			// 触摸开始事件
			handleTouchStart(event) {
				const touchX = event.touches[0].pageX;
				const touchY = event.touches[0].pageY;

				// 获取容器位置
				const query = wx.createSelectorQuery();
				query.select('.slider-container').boundingClientRect((rect) => {
					const safeBottom = wx.getSystemInfoSync().safeArea.bottom - wx.getSystemInfoSync()
						.screenHeight;

					this.containerTop = rect.top;
					this.containerLeft = rect.left;
					this.containerWidth = rect.width;
					this.containerHeight = rect.height - safeBottom;

					// 设置小球初始位置
					this.updateBallPosition(touchX, touchY);
				}).exec();

				this.dragging = true;
				this.startX = touchX;
				this.startY = touchY;
			},

			// 更新小球位置
			updateBallPosition(touchX, touchY) {
				let positionX = touchX - this.containerLeft;
				let positionY = touchY - this.containerTop;

				// 限制小球在容器内
				if (positionX < 0) positionX = 0;
				if (positionX > this.containerWidth - 44) positionX = this.containerWidth - 44;
				if (positionY < 0) positionY = 0;
				if (positionY > this.containerHeight - 44) positionY = this.containerHeight - 44;

				this.currentX = positionX;
				this.currentY = positionY;

				this.verticalDistance = positionY;
				this.horizontalDistance = positionX;
			},

			// 拖动事件
			drag(event) {
				if (!this.dragging) return;

				const moveX = event.touches[0].pageX - this.startX;
				const moveY = event.touches[0].pageY - this.startY;

				this.updateBallPosition(this.startX + moveX, this.startY + moveY);

				this.startX = event.touches[0].pageX;
				this.startY = event.touches[0].pageY;
			},

			// 停止拖动
			stopDrag() {
				this.dragging = false;
			},

			// 开始或结束游戏
			startGame() {
				// 添加逻辑
			},
		},
	};
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #000;
		color: #fff;
		overflow-y: hidden;
		width: 100%;
		height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
		padding-top: env(safe-area-inset-top);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.main-content-frequency {
		display: flex;
		justify-content: space-between;
		width: 350px;
		margin-bottom: 233px;
	}

	.options {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		width: 100%;
	}

	.options-left {
		margin: 50px 50px 0px 30px;

		.distance {
			margin-right: 5px;
			padding: 5px;
			width: 73rpx;
			height: 36rpx;
			line-height: 36rpx;
			background: #FFFFFF;
			border-radius: 17rpx;
			color: #65C61D;
		}
	}

	.slider-container {
		margin-top: 21rpx;
		width: 415rpx;
		height: auto;
		aspect-ratio: 1;
		position: relative;

		.arrow-up {
			position: absolute;
			top: 0;
			left: 50%;
			transform: translateX(-50%);
		}

		.arrow-down {
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
		}

		.arrow-left {
			position: absolute;
			left: 0%;
			top: 50%;
			transform: translateY(-50%);
		}

		.arrow-right {
			position: absolute;
			right: 0%;
			top: 50%;
			transform: translateY(-50%);
		}

		.left-arrow,
		.right-arrow {
			width: 40rpx;
			height: 66rpx;
			margin-left: 25rpx;
			margin-right: 25rpx;
		}

		.up-arrow,
		.down-arrow {
			width: 66rpx;
			height: 40rpx;
			margin-top: 25rpx;
			margin-bottom: 25rpx;
		}
	}

	.right-column {
		position: absolute;
		bottom: 428rpx;
		right: 20px;
		display: flex;
		flex-direction: column;
		align-items: center;

		.options-text {
			margin: 10px;
			font-weight: 400;
			font-size: 28rpx;

			.distance {
				margin-right: 5px;
				padding: 5px;
				width: 73rpx;
				height: 36rpx;
				line-height: 36rpx;
				background: #FFFFFF;
				border-radius: 17rpx;
				color: #65C61D;
			}
		}
	}

	.bg-image {
		width: 100%;
		height: 100%;
		position: relative;
	}

	.points-image {
		position: absolute;
		z-index: 10;
		cursor: pointer;
	}

	.ball {
		width: 44rpx;
		height: 44rpx;
	}

	.start-column-frequency {
		position: absolute;
		bottom: 0;
		right: 61rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.start-button {
		width: 100%;
		border-radius: 10px;
		background-color: transparent;
		color: #FFFFFF;
		font-size: 36rpx;
		text-align: center;
		border: none;
		transition: all 0.3s ease;
	}

	.start-button:hover {
		cursor: pointer;
	}

	.start-button:focus {
		outline: none;
	}

	image {
		width: 182rpx;
		height: 182rpx;
	}
</style>